

import { Form, DatePicker } from 'antd';
import React from 'react';
import { todayMoment } from '../../utils/moment';
import { useState } from 'react';
import { convertParams } from '../../utils/form';

// handleData(time){
//   if(!time){
//       return false
//   }else{
//   // 大于当前日期不能选 time > moment()
//   // 小于当前日期不能选 time < moment().subtract(1, "days")
//   // 只能选前7后7 time < moment().subtract(7, "days") || time > moment().add(7, 'd')
//       return time < moment().subtract(7, "days") || time > moment().add(7, 'd')
//   }
// }

// <RangePicker  disabledDate={this.handleData}/>

// https://www.jianshu.com/p/43cc41e9f49c
// https://segmentfault.com/q/1010000020079123
const DEFAULT_MONTH_RANGE = [todayMoment(), todayMoment()];

export const MonthRangePickerForm = (
  {
    form,
    field='date_month_range',
    init=DEFAULT_MONTH_RANGE, // 默认值
  }
) => {
  const [dateTime, setDateTime] = useState(init)
  const [open, setOpen] = useState(false);
  const onPanelChange = (time, mode) => {
    if (mode[1] === 'date') {
      setDateTime(time)

      setOpen(false);
    }
  }

  const onOpenChange = (status) => {
    setOpen(status)
  }

  return (
    <Form.Item>
      {form.getFieldDecorator(field, {initialValue: dateTime})(
        <DatePicker.RangePicker 
          mode={['month', 'month']}
          open={open}
          format='YYYY-MM'
          placeholder={['开始日期', '结束日期']} 
          onPanelChange={onPanelChange}
          onOpenChange={onOpenChange}
          />,
      )}
    </Form.Item>
  );
}

MonthRangePickerForm.getFieldsValue = (init=DEFAULT_MONTH_RANGE) => {
  return convertParams({date_month_range:init})
}